<template>
  <div
    :style="{height: height === 'auto' ? '200px' : height + 'px'}"
    style="border-bottom:2px solid #fff;background:#9baebb;width:232px;"
  >
    <div style="height:52px;border-left:2px solid #00704E;color:#fff">
      <div style="padding-left:7px;height:40%;fontSize: 14px;">保障工单完成情况</div>
      <div style="padding-left:8px;height:60%;display: flex;align-items: center; justify-content: space-between;">
        <div style="font-size:30px">1501</div>
        <div style="width: 106px;display:flex;align-items:center;justify-content: center;text-align:center;border-radius:4px;background: #429C82;">
          <span style="font-size: 14px;display:flex;justify-content: center;align-items:center;">已完成</span>
          <span style="font-size: 24px;margin-left:4px">30%</span>
        </div>
      </div>
    </div>
    <div
      style="height:calc(100% - 44px);display:flex;"
    >
    <div style="height:100%;flex:1;" ref="myChart1"></div>
    <div style="height:100%;flex:1" ref="myChart2"></div>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  data() {
    return {
      height: 169,
      data:{

      }
    };
  },
  mounted() {
    this.drawChart(this.$refs.myChart1);
    this.drawChart(this.$refs.myChart2);
  },
  methods: {
    drawChart(chart) {
      var myChart = echarts.init(chart);
      var data = 5950; //数值大小
      var max = 12000; //满刻度大小
      var option = {
        title: [
          {
            text: "绿色",
            x: "center",
            top: "54%",
            textStyle: {
              color: "#fff",
              fontSize: 12,
              fontWeight: "100",
            },
          },
          {
            text: data,
            x: "center",
            top: "36%",
            textStyle: {
              color: "#fff",
              fontSize: 20,
              fontWeight: "500",
            },
          },
          // {
          //   text: '689',
          //   x: 'center',
          //   top: '42%',
          //   textStyle: {
          //     fontSize: '50',
          //     color: '#fff',
          //     fontFamily: 'Lato',
          //     foontWeight: '600',
          //   },
          // },
        ],
        grid: {
          // show: true,
          left: "0%",
          right: "0%",
          top: "10%",
          bottom: "0%",
          containLabel: true,
        },
        color: ["#fff", "#fff", "rgba(255,255,255,.2)"],
        series: [
          {
            type: "pie",
            center: ["50%", "50%"],
            radius: ["76%", "60%"],
            hoverAnimation: false,
            startAngle: "-90",
            clockwise: true,
            data: [
              {
                name: "",
                value: data,
                label: {
                  show: true,
                  position: "center",
                },
                itemStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                      {
                        offset: 0.6,
                        color: "#34b26a",
                      },
                      {
                        offset: 1,
                        color: "#34b26a",
                      },
                    ]),
                  },
                },
              },
              {
                //画中间的图标
                name: "",
                value: 0,
                label: {
                  // position: "outer",
                  backgroundColor: {
                    image:
                      "",
                  },
                  width: 10,
                  height: 10,
                  borderRadius: 4,
                  padding: 4,
                  
                },
                labelLine: {
                  length: 14,
                  length2: 0,
                  lineStyle: {
                    color: "rgb(42, 107, 165,0)",
                  },
                },
              },
              {
                //画剩余的刻度圆环
                name: "",
                value: max - data,
                labelLine: {
                  show: false,
                  lineStyle: {
                    color: "rgb(42, 107, 165,0)",
                  },
                },
                itemStyle: {
                  normal: {
                    color: "#006F4E",
                  },
                },
              },
            ],
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>

<style>
.css {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>